<template>
	<view class="movie-slider-page-wrapper">
		<view class="swiper-box">
			<!-- Main Swiper with Card Effect -->
			<view ref="mainswiper" class="swiper main-swiper">
				<view class="swiper-wrapper">
					<view class="swiper-slide" v-for="(movie, index) in movies" :key="'main-' + index">
						<image :src="movie.image" mode="aspectFill" />
						<view class="overlay">
							<text class="h2-like">{{ movie.name }}</text>
						</view>
					</view>
				</view>
				<!-- Add Pagination -->
				<view ref="mainpagination" class="swiper-pagination"></view>
			</view>

			<!-- Sub Swiper with Details (Fade Effect) -->
			<view ref="subswiper" class="swiper sub-swiper">
				<view class="swiper-wrapper">
					<view class="swiper-slide subbg" v-for="(movie, index) in movies" :key="'sub-' + index">
						<text class="h1-like">{{ movie.title }}</text>
						<view class="year">
							<text class="tag" :style="{ backgroundColor: tagColors[0] }">标签</text>
							<text v-for="item in movie.tags">{{ item }}</text>
						</view>
						<view class="actor">
							<text class="tag" :style="{ backgroundColor: tagColors[1] }">签名</text>
							<text>{{ movie.signature }}</text>
						</view>
						<!-- <view class="cate">
							<text class="tag" :style="{ backgroundColor: tagColors[2] }">地区</text>
							<text>{{ movie.category }}</text>
						</view>
						<view class="time">
							<text class="tag" :style="{ backgroundColor: tagColors[3] }">时长</text>
							<text>{{ movie.duration }}</text>
						</view> -->
						<view class="describ">
							<text>{{ movie.description }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// Import Swiper Vue components (Swiper 9+)
	import Swiper, {
		Navigation,
		Pagination,
		Autoplay,
		EffectCards,
		EffectFade,
		Thumbs,
		Mousewheel
	} from 'swiper';
	// Import Swiper styles
	import 'swiper/swiper-bundle.css'; // Includes all module styles

	// It's important to install Swiper modules
	Swiper.use([Navigation, Pagination, Autoplay, EffectCards, EffectFade, Thumbs, Mousewheel]);

	export default {
		name: 'MovieSlider',
		data() {
			return {
				mainSwiperInstance: null,
				subSwiperInstance: null,
				movies: [], // 初始化为空数组
				tagColors: ["#f35a5a", "#f89e37", "#3a77fa", "#27c263"]
			};
		},
		props: {
			carddata: {
				type: Array,
				default: () => []
			}
		},
		watch: {
			carddata: {
				immediate: true, // 确保组件创建时就执行
				handler(newVal) {
					console.log('Card组件收到新数据:', newVal);
					if (Array.isArray(newVal) && newVal.length > 0) {
						this.movies = [...newVal];
						this.$nextTick(() => {
							// 如果swiper实例存在，先销毁
							if (this.mainSwiperInstance) {
								this.mainSwiperInstance.destroy(true, true);
							}
							if (this.subSwiperInstance) {
								this.subSwiperInstance.destroy(true, true);
							}
							// 重新初始化swiper
							this.initSwipers();
						});
					} else {
						console.warn('carddata 为空或不是数组');
					}
				}
			}
		},
		mounted() {
			// 只有在有数据的情况下才初始化
			if (this.movies.length > 0) {
				this.initSwipers();
			}
		},
		beforeDestroy() {
			if (this.mainSwiperInstance) {
				this.mainSwiperInstance.destroy(true, true);
			}
			if (this.subSwiperInstance) {
				this.subSwiperInstance.destroy(true, true);
			}
		},
		methods: {
			initSwipers() {
				console.log('初始化Swiper，当前数据:', this.movies);
				// It's good to ensure DOM is fully ready, especially with v-for
				this.$nextTick(() => {
					try {
						// this.$el.querySelector('.sub-swiper')
						this.subSwiperInstance = new Swiper(this.$el.querySelector('.sub-swiper'), {
							loop: true,
							effect: 'fade',
							fadeEffect: {
								crossFade: true
							},
							allowTouchMove: false,
						});

						this.mainSwiperInstance = new Swiper(this.$el.querySelector('.main-swiper'), {
							effect: 'cards',
							grabCursor: true,
							initialSlide: 0,
							loop: true,
							mousewheel: {
								invert: false,
							},
							pagination: {
								el: this.$el.querySelector('.main-swiper .swiper-pagination'),
								clickable: true,
							},
							autoplay: {
								delay: 3000,
								disableOnInteraction: false,
							},
							thumbs: {
								swiper: this.subSwiperInstance,
							}
						});
					} catch (error) {
						console.error('初始化Swiper失败:', error);
					}
				});
			}
			// initSwipers() {
			// 	console.log('初始化 Swiper，当前数据:', this.movies);

			// 	// 创建选择器查询实例（注意：uniapp 中不能直接使用 $refs，需通过 id 或 class 选择）
			// 	const query = uni.createSelectorQuery().in(this); // 指定在当前组件内查询

			// 	// 初始化子 Swiper（淡入效果）
			// 	query.select('#subSwiper').boundingClientRect((resSub) => {
			// 		if (resSub && resSub.node) {
			// 			this.subSwiperInstance = new Swiper(resSub.node, {
			// 				loop: true,
			// 				effect: 'fade',
			// 				fadeEffect: {
			// 					crossFade: true
			// 				},
			// 				allowTouchMove: false,
			// 			});
			// 		}
			// 	}).exec();

			// 	// 初始化主 Swiper（卡片效果 + 分页器 + 子 Swiper 联动）
			//  query.select('#mainSwiper').boundingClientRect((resMain) => {
			// 		if (resMain && resMain.node) {
			// 			// 获取分页器元素
			// 			query.select('#mainPagination').boundingClientRect((resPagination) => {
			// 				if (resPagination && resPagination.node) {
			// 					this.mainSwiperInstance = new Swiper(resMain.node, {
			// 						effect: 'cards',
			// 						grabCursor: true,
			// 						initialSlide: 0,
			// 						loop: true,
			// 						mousewheel: {
			// 							invert: false
			// 						},
			// 						pagination: {
			// 							el: resPagination.node, // 分页器元素
			// 							clickable: true,
			// 						},
			// 						autoplay: {
			// 							delay: 3000,
			// 							disableOnInteraction: false,
			// 						},
			// 						thumbs: {
			// 							swiper: this.subSwiperInstance, // 关联子 Swiper 实例
			// 						}
			// 					});
			// 				}
			//  		}).exec();
			// 		}
			// 	}).exec();
			// }
		}
	};
</script>


<style lang="scss" scoped>
	/* Page wrapper for centering, similar to your body style */
	.movie-slider-page-wrapper {
		display: flex;
		justify-content: center;
		align-items: center;
		// min-height: 100vh; // Ensure it takes full viewport height for centering
		background-color: #65805e; // Background from your body
		padding: 20px; // Add some padding if needed
		box-sizing: border-box;
		height: 100%;
	}

	.swiper-box {
		/* position: absolute; // Removed absolute, relying on flex centering from wrapper */
		display: flex;
		flex-direction: row;
		/* UniApp default for view is column, so explicit row */
		justify-content: center;
		align-items: center;
		gap: 10px;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 100%);
		/* backdrop-filter: blur(30px); // backdrop-filter might not be supported on all UniApp platforms, especially native. Test carefully. */
		border-radius: 20px;
		box-shadow: 0 0.5px 0 1px rgba(255, 255, 255, 0.23) inset, 0 1px 0 0 rgba(255, 255, 255, 0.66) inset, 0 4px 16px rgba(0, 0, 0, 0.12);
		z-index: 10;
		padding: 10px 30px;
		width: 80vw;
	}

	.swiper {
		// General swiper styling
		width: 30vw; // Main swiper width
		height: 180px; // Main swiper height
		padding: 10px; // Original padding
	}

	.swiper-slide {
		position: relative;
		border-radius: 10px;
		user-select: none; // For web
		box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
		overflow: hidden; // Good practice for rounded corners with images
		background-color: #ccc; // Placeholder background for slides
		display: flex; // For subbg content alignment
		flex-direction: column; // For subbg content
	}

	/* Specific to main swiper slides if needed */
	.main-swiper .swiper-slide image {
		position: absolute;
		left: 0; // Use left/top instead of inset for better compatibility sometimes
		top: 0;
		width: 100%;
		height: 100%;
		// z-index: 1;
		/* object-fit: cover; // Use mode="aspectFill" on <image> tag */
	}

	.sub-swiper {
		width: 60vw; // Sub swiper width
		padding: 0; // No padding for sub-swiper container itself, manage inside slide
		// background-color: #0f2027;
	}

	.subbg {
		// Applied to swiper-slide in sub-swiper
		// padding: 15px; // Padding for the content inside sub-swiper slide
		box-sizing: border-box;
		display: grid; // Using grid as in original
		gap: 5px;
		box-shadow: none; // Override default slide shadow
		background-color: transparent; // Make sub-swiper slides transparent
		color: #fff; // Default text color for sub-swiper
	}

	.h1-like {
		// Simulate h1
		color: #fff;
		margin-bottom: 2px;
		/* font-family: 'Maple Mone CN SemiBold', serif; // Ensure font is loaded */
		font-weight: 600; // Using semibold weight
		font-size: 18px; // Adjust as needed
	}

	


	.year,
	.actor,
	.cate,
	.time {
		display: flex;
		align-items: center;
		gap: 2px;
		color: #292626; // Darker text for details against light tags
		font-size: 12px; // Slightly smaller for details
	}

	.year text,
	.actor text,
	.cate text,
	.time text {
		color: #fff; // Text next to tag

	}


	.tag {
		color: #fff;
		padding: 1px 4px; // Adjusted padding
		font-size: 13px;
		border-radius: 5px;
		flex-shrink: 0; // Prevent tags from shrinking
		// white-space: nowrap;
		// overflow: hidden;
		// text-overflow: ellipsis;
	}

	.describ {
		height: 100px;
		overflow-y: auto; // Use overflow-y for vertical scroll
		font-size: 12px;
		color: #fff;
		-ms-overflow-style: none;
		/* IE and Edge */
		scrollbar-width: none;
		/* Firefox */
	}

	.describ::-webkit-scrollbar {
		/* Chrome, Safari and Opera */
		display: none;
	}

	.describ text {
		display: block; // Ensure text wraps correctly
		line-height: 1.5;
	}
	


	.overlay {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(to top, #0f2027, transparent, transparent);
		background-repeat: no-repeat;
		background-size: cover;
		display: flex; // For aligning text inside
		align-items: flex-end; // Align text to bottom
	}

	.overlay .h2-like {
		// Simulate h2
		color: #fff;
		font-weight: 400;
		font-size: 12px; // Equivalent to 17-18px
		line-height: 1.4;
		margin: 0px 4px 10px 4px;
	}

	.swiper-pagination {
		position: absolute; // Ensure it's correctly positioned within .main-swiper
		bottom: 0px !important; // Adjust if needed, original had translateY(10px)
		left: 0;
		width: 100%;
		transform: translateY(10px); // Original transform
	}

	/* Swiper pagination bullets styling (optional, if you want to customize) */
	::v-deep .swiper-pagination-bullet {
		background-color: #fff;
		opacity: 0.7;
	}

	::v-deep .swiper-pagination-bullet-active {
		background-color: #27c263; // Example active color
		opacity: 1;
	}

	/* Ensure Maple Mone font is loaded if you are using it */
	/* @font-face {
    font-family: 'Maple Mone CN SemiBold';
    src: url('/static/fonts/MapleMoneCNSemiBold.ttf') format('truetype'); // Adjust path
    font-weight: normal;
    font-style: normal;
} */
/* Page wrapper for centering */


/* General swiper styling */
.swiper {
    width: 100%; /* Swipers will take full width of their new context */
    padding: 0;  /* Reset padding, apply specifically if needed */
}


.sub-swiper {
    width: 100%; /* Sub swiper takes full width of .swiper-box */
    height: auto; /* Height based on its content */
}

.subbg { /* Applied to swiper-slide in sub-swiper */
    box-sizing: border-box;
    display: grid;
    gap: 8px; /* Space between text elements */
    box-shadow: none;
    background-color: transparent;
    color: #fff;
    padding: 5px 0; /* Vertical padding for sub-swiper content */
}



.tag {
    color: #fff;
    padding: 2px 5px; /* Adjusted padding */
    font-size: 11px;  /* Slightly smaller tags */
    border-radius: 4px;
    flex-shrink: 0;
}

</style>